<template>
  <div class="m-iselect">
    <span class="name">按省份选择:</span>
    <el-select
      v-model="pvalue"
      placeholder="省份">
      <el-option
        v-for="item in province"
        :key="item.value"
        :label="item.label"
        :value="item.value"/>
    </el-select>
    <el-select
      v-model="cvalue"
      :disabled="!city.length"
      placeholder="城市">
      <el-option
        v-for="item in city"
        :key="item.value"
        :label="item.label"
        :value="item.value"/>
    </el-select>
    <span class="name" style="margin-left: 20px">搜索:</span>
    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入城市中文或拼音"
      @select="handleSelect"
    >
    </el-autocomplete>
  </div>
</template>

<script>
  import _ from 'lodash';
  export default {
    data(){
      return {
        province:[],
        pvalue:'',
        city:[],
        cvalue:'',
        input:'',
        cities:[]
      }
    },
    watch:{
      pvalue:async function(newPvalue){
        let self=this;
        let {status,data:{city}}=await self.$axios.get(`http://localhost:3200/geo/province/${newPvalue}`)
        if(status===200){
          self.city=city.map(item=>{
            return {
              value:item.id,
              label:item.name
            }
          })
          self.cvalue=''
        }
      }
    },
    mounted:async function(){
      let self=this;
      let {status,data:{province}}=await self.$axios.get('http://localhost:3200/geo/province')
      if(status===200){
        self.province=province.map(item=>{
          return {
            value:item.id,
            label:item.name
          }
        })
      }
    },
    methods:{
      querySearchAsync:_.debounce(async function(query,cb){
        let self=this;
        if(self.cities.length){
          console.log(self.cities.filter(item => item.value.indexOf(query)>-1))
          cb(self.cities.filter(item => item.value.indexOf(query)>-1))
        }else{
          let {status,data:{city}}=await self.$axios.get('http://localhost:3200/geo/city')
          if(status===200){
            self.cities=city.map(item=>{return {
              value:item.name
            }})
            cb(self.cities.filter(item => item.value.indexOf(query)>-1))
          }else{
            cb([])
          }
        }
      },100),
      handleSelect:function(item){
        console.log(item.value);
      }
    }
  }
</script>

<style lang="scss">
  .page-changeCity{
    width: 1190px;
    box-sizing: border-box;
    margin: 20px auto 0;
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    min-height: 1000px;
    padding: 20px;
    .m-iselect {
      .province {
        cursor: pointer;
        border-radius: 4px;
        margin: 0 10px 0 20px;
      }

      .city {
        cursor: not-allowed;
        border-radius: 4px;
        margin: 0 20px 0 10px;
      }

      .label {
        margin-left: 40px;
      }

      .input {
        width: 220px;
        height: 40px;
        border-radius: 4px;
        margin-left: 10px;
        font-size: 14px;
        color: #666;
        box-sizing: border-box;
      }
    }
    .el-row {
      padding-bottom: 20px;
      &:after{
        content: ' ';
        height: 1px;
        width: 100%;
        border-bottom: 1px solid #E5E5E5;
        padding-top: 20px;
      }
    }
  }

</style>
